<template>
	<view>
		<view>
			<PsyTabs :tabs="courseTabs" @change="courseTabsChange" backgroundColor="#f1f1f1">
				<view v-show="courseTabsIndex == 0">
					<PsyVideoItem :data="dataList" />
				</view>
				<view v-show="courseTabsIndex == 1">
					<PsyVideoItem :data="dataList" />

				</view>
			</PsyTabs>
			<text v-if="!dataList.length" class="flex justify-center align-center h5 mb-30">
				暂无数据
			</text>

			<view class="bg-white pl-20 pr-20 pt-20">
				<text class="h5 font-weight-bold" style="color: #efa017;">热门搜索</text>
				<view class="mt-10">
					<uv-row style="flex-wrap: wrap;">
						<uv-col span="6" v-for="(item,index) in hotList" :key="item" @click="scrollToFn(item)">
							<view class="flex align-center search_item mb-20 mt-20">
								<text v-if="!index" class="search_index mr-10 text-danger">
									{{index+1}}
								</text>
								<text v-else-if="index==1" class="search_index mr-10 text-warning">
									{{index+1}}
								</text>
								<text v-else-if="index==2" class="search_index mr-10 text-hover-warning">
									{{index+1}}
								</text>
								<text v-else class="search_index mr-10">
									{{index+1}}
								</text>
								<text class="text-dark ">
									{{item}}
								</text>
							</view>
						</uv-col>
					</uv-row>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		lessonInfo
	} from "@/common/api/detail/detail.js"
	export default {
		components: {

		},
		data() {
			return {
				hotList: ["宝宝", '孕期', '生活用品', '冲奶粉', '洗澡', '婴儿车', '疫苗', '洗澡', '用药', '饮食'],
				seriesList: [],
				courseTabs: [{
					title: '视频',
				}, {
					title: '系列',
				}],
				courseTabsIndex: 0,
				dataList: [1],
				conditions: '',
				page: 1,
				size: 10

			}
		},
		methods: {
			courseTabsChange(index) {
				this.courseTabsIndex = index
				// this.dataList = []
				// 页面滚动到顶部

				this.scrollToFn(this.conditions)
			},
			scrollToFn() {
				window.scrollTo({
					top: 0,
					behavior: 'smooth' // 可选，平滑滚动
				});
				this.searchFn(this.conditions)
			},

			searchFn(value) {
				lessonInfo({
					page: this.page,
					size: this.size,
					title: value
				}).then((res) => {
					this.dataList = res.content
				}).catch(() => {
					tip.toast('网络异常!');
				}).finally(() => {

				})
			}
		},
		// 页面周期函数--监听页面加载
		onLoad(options) {
			// options 是传递过来的参数对象
			this.conditions = options.conditions; // 获取 id 参数
			// this.conditions(this.conditions)
			this.searchFn(this.conditions)

		},
	}
</script>

<style scoped lang="less">
	::v-deep .tab-content {
		padding: 0px;
	}

	::v-deep .my-20 {
		margin-top: 0px;
		margin-bottom: 0px;
	}
</style>